<template>
  <div class="tags">
    <el-tag
      :key="tag.name"
      v-for="(tag, index) in tags"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag, index)"
      :stretch="true"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { SelectMenu } from "../stores/menu";
import { useRoute } from "vue-router";
import { onMounted, ref, reactive } from "vue";
const store = SelectMenu();
const tags = store.tabList;
const router = useRouter();
const route = useRoute();
onMounted(() => {
  store.getToken();
  const tablist = localStorage.getItem("tabList");
  if (tablist) {
    store.tabList.push(...JSON.parse(tablist).slice(1));
    console.log("123", route.name);
    store.changeCurrentMenu(route.name);
    //待修改
  }
  console.log(store.tabList);
  console.log("tags", tags);
});

const changeMenu = (item) => {
  router.push({ name: item.name });
  store.selectMenu(item);
};
const handleClose = (tag, index) => {
  let length = tags.length - 1;
  //处理pinia中的tabList
  store.closeTab(tag);
  //第一个判断
  if (tag.name !== route.name) {
    return;
  }
  if (index === length) {
    store.selectMenu(tags[length - 1]);
    console.log(JSON.stringify(tags[length - 1]));
    localStorage.setItem("currentMenu", JSON.stringify(tags[length - 1]));
    router.push({ name: tags[length - 1].name });
  } else {
    store.selectMenu(tags[index]);
    localStorage.setItem("currentMenu", JSON.stringify(tags[index]));
    router.push({ name: tags[index].name });
  }
};
</script>

<style lang="less" scoped>
.tags {
  padding: 20px 0px 0px 20px;
  .el-tag {
    margin-right: 15px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
  }

  position: relative;
}
</style>
